<template>
  <div class="dispatch-page">
    <div class="breadcrumb-container">
      <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-nav">
        <el-breadcrumb-item :to="{ path: '/' }" class="breadcrumb-item">
          <el-icon class="breadcrumb-icon"><HomeFilled /></el-icon>
          <span>主页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="breadcrumb-item">
          <el-icon class="breadcrumb-icon"><Setting /></el-icon>
          <span>产能管理</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="breadcrumb-item active">
          <el-icon class="breadcrumb-icon"><User /></el-icon>
          <span>工单派工</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card class="content-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>工单派工</span>
        </div>
      </template>

      <!-- 任务派工 -->
      <div class="section">
        <div class="section-header">
          <el-button type="primary" size="small" @click="handleTaskDispatch">任务派工</el-button>
        </div>
        <el-form :model="taskDispatchForm" :rules="taskDispatchRules" ref="taskDispatchFormRef" label-width="140px">
          <el-form-item label="* 班组名称" prop="teamId">
            <el-input
              v-model="taskDispatchForm.teamName"
              placeholder="请选择班组"
              readonly
              @click="showTeamDialog = true"
            >
              <template #suffix>
                <el-icon class="select-icon"><Grid /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="* 任务负责人" prop="responsiblePersonId">
            <el-input
              v-model="taskDispatchForm.responsiblePersonName"
              placeholder="请选择负责人"
              readonly
              @click="showResponsiblePersonDialog = true"
            >
              <template #suffix>
                <el-icon class="select-icon"><Grid /></el-icon>
              </template>
            </el-input>
            <el-tooltip content="选择班组后,自动获取班组负责人" placement="top">
              <el-icon class="tip-icon"><InfoFilled /></el-icon>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="其他成员">
            <el-input
              v-model="taskDispatchForm.otherMembersText"
              placeholder="请选择其他成员"
              readonly
              @click="showOtherMembersDialog = true"
            >
              <template #suffix>
                <el-icon class="select-icon"><Grid /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="taskDispatchForm.remark" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 质检派工 -->
      <div class="section">
        <div class="section-header">
          <el-button type="primary" size="small" @click="handleQualityDispatch">质检派工</el-button>
        </div>
        <el-form :model="qualityDispatchForm" :rules="qualityDispatchRules" ref="qualityDispatchFormRef" label-width="140px">
          <el-form-item label="* 质检部门" prop="qualityInspectionDeptId">
            <el-input
              v-model="qualityDispatchForm.qualityInspectionDeptName"
              placeholder="请选择质检部门"
              readonly
              @click="showQualityDeptDialog = true"
            >
              <template #suffix>
                <el-icon class="select-icon"><Grid /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="* 质检人员" prop="qualityInspectorId">
            <el-input
              v-model="qualityDispatchForm.qualityInspectorName"
              placeholder="请选择质检人员"
              readonly
              @click="showQualityInspectorDialog = true"
            >
              <template #suffix>
                <el-icon class="select-icon"><Grid /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="qualityDispatchForm.remark" type="textarea" :rows="3" placeholder="请输入" />
          </el-form-item>
        </el-form>
      </div>

      <div class="footer-actions">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
      </div>
    </el-card>

    <!-- 选择班组对话框 -->
    <el-dialog v-model="showTeamDialog" title="选择班组" width="800px">
      <el-input
        v-model="teamSearchKeyword"
        placeholder="请输入"
        clearable
        style="margin-bottom: 16px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-table :data="filteredTeamList" border @row-click="handleSelectTeam">
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="teamname" label="班组名称" min-width="160" />
        <el-table-column prop="teamnumber" label="班组编码" min-width="160" />
        <el-table-column prop="teamTypeName" label="班组类型" min-width="120" />
        <el-table-column prop="fzr" label="负责人" min-width="120" />
        <el-table-column prop="teamMemberCount" label="班组人数" width="120" align="center" />
      </el-table>
      <template #footer>
        <el-button @click="showTeamDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmTeam">确定</el-button>
      </template>
    </el-dialog>

    <!-- 选择负责人对话框 -->
    <el-dialog v-model="showResponsiblePersonDialog" title="选择负责人" width="600px">
      <el-input
        v-model="userSearchKeyword"
        placeholder="请输入"
        clearable
        style="margin-bottom: 16px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-table :data="filteredUserList" border @row-click="handleSelectResponsiblePerson">
        <el-table-column type="index" label="序号" width="70" align="center" />
        <el-table-column prop="username" label="姓名" min-width="120" />
        <el-table-column prop="usernumber" label="工号" min-width="120" />
        <el-table-column prop="organName" label="部门" min-width="160" />
        <el-table-column prop="jobName" label="岗位" min-width="120" />
      </el-table>
      <template #footer>
        <el-button @click="showResponsiblePersonDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmResponsiblePerson">确定</el-button>
      </template>
    </el-dialog>

    <!-- 选择其他成员对话框 -->
    <el-dialog v-model="showOtherMembersDialog" title="选择其他成员" width="900px">
      <el-input
        v-model="memberSearchKeyword"
        placeholder="请输入"
        clearable
        style="margin-bottom: 16px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="member-select-container">
        <div class="member-list">
          <div class="member-group">
            <el-checkbox
              v-model="selectAllMembers"
              @change="handleSelectAllMembers"
            >
              {{ selectedTeamName ? `${selectedTeamName}成员 (${selectedMembers.length}/${availableMembers.length}人)` : '全部成员' }}
            </el-checkbox>
            <el-table :data="availableMembers" border style="margin-top: 12px" @selection-change="handleMemberSelectionChange">
              <el-table-column type="selection" width="48" />
              <el-table-column type="index" label="序号" width="70" align="center" />
              <el-table-column prop="username" label="姓名" min-width="120" />
              <el-table-column prop="usernumber" label="工号" min-width="120" />
              <el-table-column prop="organName" label="部门" min-width="160" />
            </el-table>
          </div>
        </div>
        <div class="selected-list">
          <div class="selected-header">
            <span>已选对象 {{ selectedMembers.length }}</span>
            <el-button type="danger" link @click="handleClearMembers">清空</el-button>
          </div>
          <div class="selected-items">
            <el-tag
              v-for="member in selectedMembers"
              :key="member.id"
              closable
              @close="handleRemoveMember(member)"
              style="margin: 4px"
            >
              {{ member.username }}
            </el-tag>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showOtherMembersDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmOtherMembers">确定</el-button>
      </template>
    </el-dialog>

    <!-- 选择质检部门对话框 -->
    <el-dialog v-model="showQualityDeptDialog" title="选择部门" width="600px">
      <el-input
        v-model="deptSearchKeyword"
        placeholder="请输入"
        clearable
        style="margin-bottom: 16px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-tree
        :data="deptTreeData"
        :props="{ label: 'organname', children: 'children' }"
        node-key="id"
        :default-expand-all="true"
        @node-click="handleSelectDept"
      >
        <template #default="{ node, data }">
          <div class="tree-node">
            <el-radio
              :model-value="selectedDeptId"
              :label="data.id"
              @change="handleConfirmDept(data)"
            >
              {{ data.organname }}
            </el-radio>
          </div>
        </template>
      </el-tree>
      <template #footer>
        <el-button @click="showQualityDeptDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmDept(selectedDept)">确定</el-button>
      </template>
    </el-dialog>

    <!-- 选择质检人员对话框 -->
    <el-dialog v-model="showQualityInspectorDialog" title="选择检验人员" width="900px">
      <el-input
        v-model="inspectorSearchKeyword"
        placeholder="请输入"
        clearable
        style="margin-bottom: 16px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <div class="inspector-select-container">
        <div class="inspector-list">
          <div class="inspector-group">
            <div class="group-title">{{ selectedDeptName || '全部部门' }} ({{ availableInspectors.length }}人)</div>
            <el-table :data="availableInspectors" border style="margin-top: 12px" @row-click="handleSelectInspector">
              <el-table-column type="index" label="序号" width="70" align="center" />
              <el-table-column prop="username" label="姓名" min-width="120" />
              <el-table-column prop="usernumber" label="工号" min-width="120" />
              <el-table-column prop="organName" label="部门" min-width="160" />
              <el-table-column label="选择" width="80" align="center">
                <template #default="scope">
                  <el-radio
                    :model-value="selectedInspectorId"
                    :label="scope.row.id"
                    @change="handleConfirmInspector(scope.row)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="selected-list">
          <div class="selected-header">
            <span>已选对象 {{ selectedInspector ? 1 : 0 }}</span>
          </div>
          <div class="selected-items" v-if="selectedInspector">
            <el-tag closable @close="handleRemoveInspector" style="margin: 4px">
              {{ selectedInspector.username }}
            </el-tag>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="showQualityInspectorDialog = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmInspector(selectedInspector)">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight, Grid, HomeFilled, InfoFilled, Search, Setting, User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import https from '@/Http/http'
import { extractPayload, getErrorMessage, getResponseMessage, isRequestSuccess } from '@/utils/responseHelper'

interface TeamItem {
  id: number
  teamname: string
  teamnumber: string
  teamtypeid: number
  teamTypeName?: string
  fzr: string
  teamMemberCount?: number
}

interface UserItem {
  id: number
  username: string
  usernumber: string
  organid: number
  organName?: string
  jobid: number
  jobName?: string
}

interface DeptItem {
  id: number
  organname: string
  organnumber: string
  prganparent: number
  children?: DeptItem[]
}

const route = useRoute()
const router = useRouter()
const taskDispatchFormRef = ref<FormInstance>()
const qualityDispatchFormRef = ref<FormInstance>()
const submitting = ref(false)

const taskId = computed(() => Number(route.query.id) || 0)

const taskDispatchForm = reactive({
  teamId: undefined as number | undefined,
  teamName: '',
  responsiblePersonId: undefined as number | undefined,
  responsiblePersonName: '',
  otherMemberIds: [] as number[],
  otherMembersText: '',
  remark: ''
})

const qualityDispatchForm = reactive({
  qualityInspectionDeptId: undefined as number | undefined,
  qualityInspectionDeptName: '',
  qualityInspectorId: undefined as number | undefined,
  qualityInspectorName: '',
  remark: ''
})

const taskDispatchRules: FormRules = {
  teamId: [{ required: true, message: '请选择班组', trigger: 'change' }],
  responsiblePersonId: [{ required: true, message: '请选择任务负责人', trigger: 'change' }]
}

const qualityDispatchRules: FormRules = {
  qualityInspectionDeptId: [{ required: true, message: '请选择质检部门', trigger: 'change' }],
  qualityInspectorId: [{ required: true, message: '请选择质检人员', trigger: 'change' }]
}

// 对话框状态
const showTeamDialog = ref(false)
const showResponsiblePersonDialog = ref(false)
const showOtherMembersDialog = ref(false)
const showQualityDeptDialog = ref(false)
const showQualityInspectorDialog = ref(false)

// 搜索关键词
const teamSearchKeyword = ref('')
const userSearchKeyword = ref('')
const memberSearchKeyword = ref('')
const deptSearchKeyword = ref('')
const inspectorSearchKeyword = ref('')

// 数据列表
const teamList = ref<TeamItem[]>([])
const userList = ref<UserItem[]>([])
const deptList = ref<DeptItem[]>([])
const deptTreeData = ref<DeptItem[]>([])

// 选中的项
const selectedTeam = ref<TeamItem | null>(null)
const selectedResponsiblePerson = ref<UserItem | null>(null)
const selectedMembers = ref<UserItem[]>([])
const selectedDept = ref<DeptItem | null>(null)
const selectedDeptId = ref<number | null>(null)
const selectedDeptName = ref('')
const selectedInspector = ref<UserItem | null>(null)
const selectedInspectorId = ref<number | null>(null)

const selectAllMembers = ref(false)

const selectedTeamName = computed(() => selectedTeam.value?.teamname)

const availableMembers = computed(() => {
  if (!memberSearchKeyword.value) return userList.value
  const keyword = memberSearchKeyword.value.toLowerCase()
  return userList.value.filter(
    user =>
      user.username.toLowerCase().includes(keyword) ||
      user.usernumber.toLowerCase().includes(keyword)
  )
})

const availableInspectors = computed(() => {
  let list = userList.value
  if (selectedDeptId.value) {
    list = list.filter(user => user.organid === selectedDeptId.value)
  }
  if (inspectorSearchKeyword.value) {
    const keyword = inspectorSearchKeyword.value.toLowerCase()
    list = list.filter(
      user =>
        user.username.toLowerCase().includes(keyword) ||
        user.usernumber.toLowerCase().includes(keyword)
    )
  }
  return list
})

const filteredTeamList = computed(() => {
  if (!teamSearchKeyword.value) return teamList.value
  const keyword = teamSearchKeyword.value.toLowerCase()
  return teamList.value.filter(
    team =>
      team.teamname.toLowerCase().includes(keyword) ||
      team.teamnumber.toLowerCase().includes(keyword)
  )
})

const filteredUserList = computed(() => {
  if (!userSearchKeyword.value) return userList.value
  const keyword = userSearchKeyword.value.toLowerCase()
  return userList.value.filter(
    user =>
      user.username.toLowerCase().includes(keyword) ||
      user.usernumber.toLowerCase().includes(keyword)
  )
})

const loadTeams = async () => {
  try {
    // 这里应该调用获取班组列表的API
    // const response = await https.Reads.get('/Working/WorkTeamQuery', {})
    // 暂时使用空数组
    teamList.value = []
  } catch (error) {
    console.error('加载班组列表失败:', error)
  }
}

const loadUsers = async () => {
  try {
    // 这里应该调用获取用户列表的API
    // const response = await https.Reads.get('/RBAC/UserQuery', {})
    // 暂时使用空数组
    userList.value = []
  } catch (error) {
    console.error('加载用户列表失败:', error)
  }
}

const loadDepts = async () => {
  try {
    // 这里应该调用获取部门列表的API并构建树形结构
    // const response = await https.Reads.get('/Organization/organQuery', {})
    // 暂时使用空数组
    deptList.value = []
    deptTreeData.value = []
  } catch (error) {
    console.error('加载部门列表失败:', error)
  }
}

const handleTaskDispatch = () => {
  ElMessage.info('任务派工功能')
}

const handleQualityDispatch = () => {
  ElMessage.info('质检派工功能')
}

const handleSelectTeam = (row: TeamItem) => {
  selectedTeam.value = row
}

const handleConfirmTeam = () => {
  if (!selectedTeam.value) {
    ElMessage.warning('请选择班组')
    return
  }
  taskDispatchForm.teamId = selectedTeam.value.id
  taskDispatchForm.teamName = selectedTeam.value.teamname
  // 如果班组有负责人，自动填充
  if (selectedTeam.value.fzr) {
    const fzrUser = userList.value.find(
      u => u.username === selectedTeam.value!.fzr || u.usernumber === selectedTeam.value!.fzr
    )
    if (fzrUser) {
      taskDispatchForm.responsiblePersonId = fzrUser.id
      taskDispatchForm.responsiblePersonName = fzrUser.username
    }
  }
  showTeamDialog.value = false
}

const handleSelectResponsiblePerson = (row: UserItem) => {
  selectedResponsiblePerson.value = row
}

const handleConfirmResponsiblePerson = () => {
  if (!selectedResponsiblePerson.value) {
    ElMessage.warning('请选择负责人')
    return
  }
  taskDispatchForm.responsiblePersonId = selectedResponsiblePerson.value.id
  taskDispatchForm.responsiblePersonName = selectedResponsiblePerson.value.username
  showResponsiblePersonDialog.value = false
}

const handleSelectAllMembers = (checked: boolean) => {
  if (checked) {
    selectedMembers.value = [...availableMembers.value]
  } else {
    selectedMembers.value = []
  }
}

const handleMemberSelectionChange = (selection: UserItem[]) => {
  selectedMembers.value = selection
  selectAllMembers.value = selection.length === availableMembers.value.length
}

const handleRemoveMember = (member: UserItem) => {
  const index = selectedMembers.value.findIndex(m => m.id === member.id)
  if (index > -1) {
    selectedMembers.value.splice(index, 1)
  }
}

const handleClearMembers = () => {
  selectedMembers.value = []
  selectAllMembers.value = false
}

const handleConfirmOtherMembers = () => {
  taskDispatchForm.otherMemberIds = selectedMembers.value.map(m => m.id)
  taskDispatchForm.otherMembersText = selectedMembers.value.map(m => m.username).join('、')
  if (selectedMembers.value.length > 0) {
    taskDispatchForm.otherMembersText += ` (${selectedMembers.value.length}人)`
  }
  showOtherMembersDialog.value = false
}

const handleSelectDept = (data: DeptItem) => {
  selectedDept.value = data
  selectedDeptId.value = data.id
  selectedDeptName.value = data.organname
}

const handleConfirmDept = (dept?: DeptItem) => {
  if (!dept && !selectedDept.value) {
    ElMessage.warning('请选择部门')
    return
  }
  const targetDept = dept || selectedDept.value
  if (!targetDept) return
  qualityDispatchForm.qualityInspectionDeptId = targetDept.id
  qualityDispatchForm.qualityInspectionDeptName = targetDept.organname
  showQualityDeptDialog.value = false
}

const handleSelectInspector = (row: UserItem) => {
  selectedInspector.value = row
  selectedInspectorId.value = row.id
}

const handleConfirmInspector = (inspector?: UserItem) => {
  if (!inspector && !selectedInspector.value) {
    ElMessage.warning('请选择质检人员')
    return
  }
  const targetInspector = inspector || selectedInspector.value
  if (!targetInspector) return
  qualityDispatchForm.qualityInspectorId = targetInspector.id
  qualityDispatchForm.qualityInspectorName = targetInspector.username
  showQualityInspectorDialog.value = false
}

const handleRemoveInspector = () => {
  selectedInspector.value = null
  selectedInspectorId.value = null
  qualityDispatchForm.qualityInspectorId = undefined
  qualityDispatchForm.qualityInspectorName = ''
}

const handleSubmit = async () => {
  if (!taskDispatchFormRef.value || !qualityDispatchFormRef.value) return

  // 验证任务派工表单
  await taskDispatchFormRef.value.validate(async (taskValid) => {
    if (!taskValid) return

    // 验证质检派工表单
    await qualityDispatchFormRef.value.validate(async (qualityValid) => {
      if (!qualityValid) return

      submitting.value = true
      try {
        // 提交任务派工
        const taskResponse = await https.Writes.post('/AWrite/WorkOrderDispatch', {
          taskId: taskId.value,
          dispatchType: 1,
          teamId: taskDispatchForm.teamId,
          responsiblePersonId: taskDispatchForm.responsiblePersonId,
          otherMemberIds: taskDispatchForm.otherMemberIds,
          remark: taskDispatchForm.remark,
          dispatcher: 'System' // 实际应该从登录信息获取
        })
        const taskPayload = extractPayload(taskResponse)
        if (!isRequestSuccess(taskPayload)) {
          throw new Error(getResponseMessage(taskPayload, '任务派工失败'))
        }

        // 提交质检派工
        const qualityResponse = await https.Writes.post('/AWrite/WorkOrderDispatch', {
          taskId: taskId.value,
          dispatchType: 2,
          qualityInspectionDeptId: qualityDispatchForm.qualityInspectionDeptId,
          qualityInspectorId: qualityDispatchForm.qualityInspectorId,
          remark: qualityDispatchForm.remark,
          dispatcher: 'System' // 实际应该从登录信息获取
        })
        const qualityPayload = extractPayload(qualityResponse)
        if (!isRequestSuccess(qualityPayload)) {
          throw new Error(getResponseMessage(qualityPayload, '质检派工失败'))
        }

        ElMessage.success('派工成功')
        router.back()
      } catch (error) {
        ElMessage.error(getErrorMessage(error, '派工失败'))
      } finally {
        submitting.value = false
      }
    })
  })
}

const handleClose = () => {
  router.back()
}

onMounted(() => {
  if (!taskId.value) {
    ElMessage.error('任务ID不能为空')
    router.back()
    return
  }
  loadTeams()
  loadUsers()
  loadDepts()
})
</script>

<style scoped>
.dispatch-page {
  padding: 16px;
  min-height: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.breadcrumb-container {
  margin-bottom: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.breadcrumb-nav :deep(.el-breadcrumb__inner) {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb-item.active :deep(.el-breadcrumb__inner) {
  color: #fff;
  font-weight: 600;
}

.breadcrumb-icon {
  font-size: 16px;
  margin-right: 4px;
}

.content-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.card-header {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.section {
  margin-bottom: 32px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.section-header {
  margin-bottom: 16px;
}

.select-icon {
  cursor: pointer;
  color: #409EFF;
}

.tip-icon {
  margin-left: 8px;
  color: #f39c12;
  cursor: help;
}

.member-select-container,
.inspector-select-container {
  display: flex;
  gap: 16px;
  height: 400px;
}

.member-list,
.inspector-list {
  flex: 1;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  overflow-y: auto;
}

.selected-list {
  width: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.selected-items {
  flex: 1;
  overflow-y: auto;
}

.member-group,
.inspector-group {
  width: 100%;
}

.group-title {
  font-weight: 600;
  margin-bottom: 8px;
}

.tree-node {
  display: flex;
  align-items: center;
  width: 100%;
}

.footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
</style>

